
var collectionRate = echarts.init(document.getElementById('collectionRate'));

function chart5(data) {
    // var collectarray2 = [data[3].name,data[2].name,data[1].name,data[0].name];
    var collectarray2 = [];
    var data1 = [];
    var data2 = [];
    let length = data.length>3?4:data.length;
    for (let i =length;i>0;i--){
        collectarray2.push(data[i-1].name);
        data1.push({
            name:data[i-1].name,
            value:100,
        });
        data2.push({
            name:data[i-1].name,
            value:data[i-1].value,
            time:data[i-1].time.replace('T',' '),
            use:data[i-1].use,
            total:data[i-1].total
        })
    }
    var option = {
        //backgroundColor:"rgba(2,13,34,1)",
        tooltip: {
            show:true,
            trigger: 'axis',
            formatter:function(param){
                // var index=param[0]['dataIndex'];
                //console.log(array1)
                return param[0].data.name+":"+param[0].data.value +'%' +'<br>定额:'+param[0].data.total+ '<br>最大需量值:'+param[0].data.use+'<br>最大需量时间:'+param[0].data.time;
            },
            axisPointer: {
                type: 'line'
            }
        },
        grid: {
            top: '10%',
            bottom: '20%',
            left:'6%',
            right:"12%",
            containLabel: true
        },
        xAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: false,
                    interval: 1,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }

            }
        ],
        yAxis:{
            type: 'category',
            data: ['1','2','3','4'],
            axisLabel: {
                color:"rgba(255,255,255,1)",
                fontStyle:{
                    "backgroundColor":"#2a45ba"
                },
                formatter: function (value) {
                    return '{' + value + '|'+(value*1)+'}{value|'+collectarray2[4-value]+'}';
                },
                rich: {
                    value: {
                        align: 'right',
                        width: 60,
                        padding:[6,8,6,8],
                        margin:[0,0,0,6],
                        fontSize:14,
                        backgroundColor:'#243372'
                    },
                    0: {
                        height: 30,
                        width:20,
                        //marginRight:20,
                        borderRadius:20,
                        align: 'center',
                        backgroundColor:"#346afe",
//                             backgroundColor: {
//                                 image: img['0']
//                             }
                    },
                    1: {
                        height: 20,
                        width:20,
                        //marginRight:20,
                        borderRadius:20,
                        align: 'center',
                        backgroundColor:"#346afe",
                    },
                    2: {
                        height: 20,
                        width:20,
                        //marginRight:20,
                        borderRadius:20,
                        align: 'center',
                        backgroundColor:"#346afe",
                    },
                    3: {
                        height: 20,
                        width:20,
                        //marginRight:20,
                        borderRadius:20,
                        align: 'center',
                        backgroundColor:"#346afe",
                    },
                    4: {
                        height: 20,
                        width:20,
                        //marginRight:20,
                        borderRadius:20,
                        align: 'center',
                        backgroundColor:"#346afe",
                    }

                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            zlevel: 99
        },
        series: [{
            type: 'bar',
            barWidth: '24%',
            barGap: '-100%',
            barCategoryGap:"10%",
            tooltip: {
                show:false
            },
            itemStyle: {
                normal: {
                    barBorderRadius:[10, 10, 10, 10],
                    color: "transparent",
                    borderWidth:1,
                    borderType:"solid",
                    borderColor:"#0b52b3",
                    label: {
                        show:false,
                        position: 'right',
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        }
                    }
                }
            },
            data: data1
        },{
            type: 'bar',
            barWidth: '18%',
            barGap: '-89%',
            barCategoryGap:"10%",
            z: 2,
            itemStyle: {
                normal: {
                    barBorderRadius:[10, 10, 10, 10],
                    color:'#346afe' ,
                    label: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        }
                    }
                }
            },
            data: data2
        }]
    };
    option.yAxis.data.reverse();
    option.series[0].data.reverse();
    return option;
}
